<template>
	<view>
		
		<van-search placeholder="请输入搜索关键词" />
		<van-form style="text-align: center;background-color: #dcdee0;padding: 0.5rem">
      
<!-- 	  <div>
	    <van-swipe :autoplay="3000">
	      <van-swipe-item v-for="(image, index) in images" :key="index">
	        <img class="img_tu" v-lazy="image" />
	      </van-swipe-item>
	    </van-swipe>
	  </div> -->
	  <!-- 轮播图 -->
	  <view class="slideshow">
	  	<swiper indicator-dots circular autoplay>
	  		<swiper-item >
	  			<image src="../../static/logo.png" mode="" ></image>
	  		</swiper-item>
	  		<swiper-item>
	  			<image src="../../static/logo.png" mode=""></image>
	  		</swiper-item>
	  	</swiper>
	<!-- 轮播图 -->
	  </view>
	  
	  <view style="display: flex;">
		  
       <!-- <van-col span="12">
          <van-cell is-link :value="areaTest" @click="showArea = true"/>
          <van-action-sheet v-model="showArea" title="地址">
            <van-area
              :area-list="areaList"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              @cancel="cancelArea"
              @confirm = "confirmArea"
            />
          </van-action-sheet> 
        </van-col> -->
		<button  style="width: 400rpx;height: 70rpx;line-height: 80rpx;background-color: #fff;color: gray;margin-left: 50rpx;" @click="btnClick">请选择地址</button>
		<selectAddress :value="areaTest" v-model="showArea" ref='selectAddress' @selectAddress="successSelectAddress"></selectAddress>
        <van-col span="1"></van-col> 
        <van-col span="7">

         <!-- <van-field
            readonly
            clickable
            name="picker"
            v-model="value"
            label=""
            right-icon="arrow-down"
            placeholder="类型"
            @click="showPicker = true"
          /> -->
		  <select style="width: 180rpx;height: 70rpx;">
		  
		  <option>类型</option>
		  
		  <option v-model="value"></option>
		  
		  </select>
         <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>

          <!--<van-field-->
          <!--placeholder="用户名"-->
          <!--v-model="username"-->
          <!--/>-->
        </van-col>
        <van-col span="4">
          <view >
            <button style="height: 2.3rem;width: 100rpx;line-height: 80rpx;background-color: gray;color: #fff;" color="grey" native-type="submit" @click="submitButton">搜索</button>
          </view>
        </van-col>

      </view>
	  

    </van-form>
		
		
		
		
			
		<view class="big" v-for="(item, index) in items">
			<van-row >
			  <van-col span="12">
				  <image style="width: 304rpx; height: 304rpx;margin-left: 50rpx;" src="../../static/tabs/girl.jpg" mode=""></image>
			  </van-col>
			  <van-col span="12">
				 <view class="p" align="left" @click="tianhzuan(item.constructionId)">
					  <p>{{item.constructionName}}</p>
					  <p style="font-size: 0.7rem">已交保证金{{item.balanceMoney}}元</p>
					  <p>
						<van-rate value="valueaa" bind:change="onChange" />
					  </p>
					  <p style="font-size: 0.7rem">{{item.descript}}</p>
					  <p style="font-size: 0.7rem">{{item.address}}</p>
					  <p style="font-size: 0.7rem">距离:2.8km</p>
				</view>
			  </van-col>
			  
			</van-row>
			
		</view>
			
		
		
	</view>
</template>

<script>
	 import areaList from '@/utils/area';
	  import { findStation } from '@/api/Client_sales.js';
	  import { selectReleaseShu } from '@/api/customer/local.js';
	  import { findAllListBuilding, } from '@/api/constructionTeam/building.js';
	  import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue';
	  
	export default {
		components: {selectAddress},
		data() {
			return {
				
				valueaa: 3,
				items: [
					{ constructionId: '1',constructionName: '赵德建',balanceMoney: '22',descript: '莫西莫西',address: '石家庄桥西区' },
					{ constructionId: '1',constructionName: '赵德建',balanceMoney: '22',descript: '莫西莫西',address: '石家庄桥西区' },
				],
			
			teamNamea:"",
			  value: '',
			  columns: [],
			  showPicker: false,
			  reslist:[],
			  addressaa:"",
			  areaList,
			  addressaa:"",
			  // 选择地区展示
			  showArea:false,
			  areaTest:"请选择省市区",
			  form:{},
			  constructionId: '',
			  params: {
				pageNum: 1,
				pageSize: 10,
			  },
			  indexList: [],
			  aass:[],
			  valuepx: 2.5,
			  // 显示搜索条件
			  showSearch: true,
			  show: false,
			  value: '',
			  images: [
				'https://img.yzcdn.cn/vant/apple-1.jpg',
				'https://img.yzcdn.cn/vant/apple-2.jpg',
			  ],
			  
				
			}
		},
		 created () {
		    
		    this.findAllListBuilding();
		 
		  },
		methods: {
			btnClick() {
			        this.$refs.selectAddress.show()
			    },
			    successSelectAddress(address){ //选择成功回调
			    console.log(address)
			        },
			findAllListBuilding(){
				findAllListBuilding().then(res=>{
					res.aass = res.data;
				})
			},
			
			// 地址取消事件
			    cancelArea(res){
			      this.showArea = false;
			    },
			
			// 地址确定事件
			    confirmArea(res){
			      this.areaTest = "";
			      for (let i = 0; i < res.length; i++){
			        this.areaTest += res[i].name;
			      }
			      for (let i=0;i<res.length;i++){
			        console.log(this.addressaa = res[0].name+res[1].name+res[2].name)
			      }
			      var address = this.addressaa;
			      findAllListAlladdres(address).then(res=>{
			        this.indexList = res.data;
			      })
			      this.showArea = false;
			    },
			
			findAllListBuilding(){
				findAllListBuilding().then(res=>{
					this.indexList = res.data.rows;
				})
				
			},
			
			tianhzuan(constructionId){
				// this.$router.push({ path: "/pages/index_Buildingconstruction/PaymentDetails",
				
				this.$router.push({ path: "/pages/index_Buildingconstruction/ShopDetails", 
				query: { constructionId: constructionId } });
   
			},
			
			
			
			 
			
		}
	}
</script>

<style>
	.p p{
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
 .goods-card {
    margin: 0;
    background-color: @white;
  }
  .divcss5{width:5rem;height:2rem;border:0.1rem solid #F00}
  .delete-button {
    height: 100%;
  }

  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 450;
    font-size: 1.3rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .img_tu{
    width: 100%;
    height: 10rem;
  }

  .search_bar {
    display: flex;
    height: 10.133vw;
    width: 100%;
    margin-top: 1.867vw;
    line-height: 10.133vw;
    font-size: 3.733vw;
    background-color: #ffffff;
    border-radius: 13.333vw;
    box-shadow: 0.533vw 0.533vw 1.333vw rgb(219, 219, 219);
    padding: 0px 19.999px;
    box-sizing: border-box;
  }
  .hot_key {
    color: #000000;
  }
  .search_icon {
    line-height: 10.133vw;
    font-size: 4.8vw;
    margin-right: 2.667vw;
    color: #999999;
  }
  .content {
    padding: 0.16rem 0.16rem 1.6rem;
  }
  .index_header {
    height: 14.4vw;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 4vw;
  }
  .area {
    height: 14.4vw;
    line-height: 14.4vw;
    color: #777777;
    width: 100%;
  }
</style>
